{include file="public/head" title="认证" keywords="认证" description="认证" /}
<style>
    .toauth span{
        font-size: 0.7rem;
    }
    .toauth input{
        font-size: 0.7rem;
    }
    .mui-switch:before{
        top:-15px;
    }
    .mui-switch.mui-active{
        border-color:#01cebf;
                background-color:#01cebf;
    }

    </style>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!-- 菜单容器 -->

    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color: #fff;">
            <div class="mui-scroll">
                <header class="tx_head">
                    <p>
                        <a href="javascript:history.go(-1)" class="header_p1"><span class="mui-icon mui-icon-arrowleft"></span></a>
                    <h5>添加地址</h5>
                    </p>
                </header>
                <main class="wdzh_main">
                    <section class="">
                        <ul class="">
                            <li class="jyjl_li" style="border-bottom: 7px solid #f3f3f3;line-height: 0;height: 0.1rem;">

                            </li>
                            <li  class="toauth"><span style=" margin-right: 28px;   margin-left: 2.5rem;">姓名:</span>
                                <input style="width: 280px;" type="text" id="addr_name" value="" placeholder="姓名"/>
                            </li>
                            <li class="toauth"><span style="margin-right: 28px;margin-left: 2.5rem;">电话:</span>
                                <input style="width: 280px;" type="text" id="phone" value="" placeholder="联系电话"/>
                            </li>

                            <li class="toauth"><span style="margin-right: 28px;margin-left: 2.5rem;">区域:</span>
                                <input style="width: 280px;" type="text" id="area" value="" placeholder="区域"/>
                                <input type="hidden" id="area_id"  placeholder="区域"/>
                            </li>

                            <li class="toauth"><span style="margin-right: 28px;">详细地址:</span>
                                <input style="width: 280px;" type="text" id="xiangxi" value="" placeholder="详细地址"/>
                            </li>

                            <li class="toauth ">
                                <span style="margin-right: 28px;">默认地址:</span>
                                <div class="mui-switch mui-active" id="mySwitch" style="margin-left: 103px" data-off="0" data-on = "1">
                                    <div class="mui-switch-handle"></div>
                                </div>
                            </li>

                            <li class="toauth " style="padding: 10px;text-align: center;border-bottom:none">
                                <input style="width: 280px;height: 3rem; background: #01cebf;font-size: 1.4rem;" type="submit" id="bank_btn" value="提交" placeholder=""/>
                            </li>

                        </ul>

                    </section>
                </main>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<input type="hidden" name="imgs_0">
<input type="hidden" name="imgs_1">
<input type="hidden" name="imgs_2">
<!--身份证-->
<input type="hidden" name="imgs_3">
<input type="hidden" name="imgs_4">
{include file="public/footer"}
</body>
<script>



    $('#area').bind("click",function () {
        var data =[];
        $.get('{:url("getarea")}',function (res) {
            data =  res.data;
            var picker = new mui.PopPicker({   //这里注意大小写PopPicker
                layer: 3,  //表示三列，即三级菜单或者联动
                buttons:['取消', '确定']     //显示按钮
            });
            console.log(data);
            picker.setData(data);
            //这里代表被选中的元素
            picker.show(function (selectItems) {
                $("#area").val(selectItems[0].text+'-'+selectItems[1].text+'-'+selectItems[2].text);
                $("#area_id").val(selectItems[0].value+','+selectItems[1].value+','+selectItems[2].value);
            })
        });
    });

    $("#bank_btn").click(function(){
        var addr_name = $("#addr_name").val();
        var phone = $("#phone").val();
        var xiangxi = $("#xiangxi").val();
        var area_id = $("#area_id").val();
        var isfag = $('.mui-active').attr('data-on')==1?1:0;

//        if(addr_name.length < 1){
//            layer.msg('请填写姓名', {icon: 5, time: 2000});
//            return;
//        }
//
//
//        if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))){
//            layer.msg('请填写正确的手机号', {icon: 5, time: 2000});
//            return;
//        }
//        if(area_id.length < 1){
//            layer.msg('请选择地区', {icon: 5, time: 2000});
//            return;
//        }

        if(xiangxi.length < 1){
            layer.msg('请选填写详细地址', {icon: 5, time: 2000});
            return;
        }



        $.ajax({
            type:"post",
            url:'{:url("addr")}',
            dataType:"json",
            data:{addr_name:addr_name,phone:phone,xiangxi:xiangxi,area_id:area_id,isfag:isfag},
            success: function(data){
                if(data.code == 1){
                    layer.msg(data.msg, {icon: 6, time: 1000},function(){
                        window.location.href = "{:url('index')}";
                    });
                }else{
                    layer.msg(data.msg, {icon: 5, time: 2000});
                }
            }
        });
    });
</script>
</html>